import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import MarginTopBlock from "../base/MarginTopBlock"
import { ButtonRegularOutline } from "../composite/ButtonRegular/main"
import { ModalSlideUpStaticMethods } from "../composite/ModalSlideUp/main"
import { eventPreventCss } from "@/styles/variables/css"
import { useNavigate } from "react-router-dom"
import { PATHS } from "@/constants/path"

export default function KycReminderHint() {
    const navigate = useNavigate()

    const handleOKay = () => {
        ModalSlideUpStaticMethods.close("root")
    }

    const handleContactSupport = () => {
        ModalSlideUpStaticMethods.close("root")
        navigate(`${PATHS.MY}/service`)
    }

    return (
        <div
            css={css`
                font-family: "Gilroy";
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                height: 100%;
                background: #fffffff2;
                backdrop-filter: blur(80rem);
                border-radius: 16rem;
                width: 327rem;
                height: 260rem;
                align-self: center;
                padding: 0 24rem;
            `}
        >
            <Image
                css={css`
                    width: 56rem;
                    height: 56rem;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
                src={"kyc/entry_warn.webp"}
            />
            <MarginTopBlock top={8} />
            <div
                css={css`
                    color: #0f0f10;
                    font-weight: 600;
                    font-size: 18rem;
                    line-height: 28rem;
                    letter-spacing: 0%;
                    text-align: center;
                    text-transform: capitalize;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
            >
                Hint
            </div>
            <MarginTopBlock top={8} />
            <div
                css={css`
                    font-weight: 400;
                    font-size: 14rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #424144;
                    align-self: center;
                    ${eventPreventCss.styles}
                `}
            >
                Your KYC is under review. You can only use the wallet function after the review is
                passed.
            </div>
            <MarginTopBlock top={24} />
            <div
                css={css`
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 12rem;
                    > * {
                        flex: 1;
                    }
                `}
            >
                <ButtonRegularOutline onClick={handleOKay}>Okay</ButtonRegularOutline>
                <ButtonRegularOutline onClick={handleContactSupport}>Contact</ButtonRegularOutline>
            </div>
        </div>
    )
}
